window.addEventListener('load', function () {
    var currentIndex = 0;
    var currentIndexCircle = 0;

    // 动画函数
    function animate(obj, targer, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (targer - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == targer) {
                clearInterval(timer);
                if (callback) {
                    callback();
                }
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 15)
    }

    var ul = document.querySelector(".adUl");
    var ol = document.querySelector("ol");
    var lunbotu = document.querySelector(".ad");
    var lunbotuWidth = lunbotu.offsetWidth
    var arrow_l = document.querySelector('.buttonLeft');
    var arrow_r = document.querySelector('.buttonRight');

    // 鼠标进入停止播放
    lunbotu.addEventListener('mouseenter', function () {
        clearInterval(time);
        time = null;
    })

    lunbotu.addEventListener('mouseleave', function () {
        clearInterval(time);
        time = null;
        time = setInterval(function () {
            arrow_r.click();
        }, 2000);
    })

    // 复制照片
    var first = document.querySelector(".adUl").children[0].cloneNode(true);
    document.querySelector(".adUl").appendChild(first);

    // 点击下边边框

    for (var i = 0; i < ul.children.length - 1; i++) {
        var li = this.document.createElement('li');
        li.setAttribute('data-index', i);
        ol.appendChild(li);
        // 点击
        li.addEventListener('click', function () {
            // 点击换色
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            currentIndex = this.getAttribute('data-index');
            currentIndexCircle = currentIndex;
            // 点击移动图片
            var index = this.getAttribute('data-index');
            animate(ul, -index * lunbotuWidth)
        })
    }

    ol.children[0].className = 'current';

    // 点击右侧箭头
    arrow_r.addEventListener('click', function () {
        if (currentIndex == ul.children.length - 1) {
            ul.style.left = 0;
            currentIndex = 0;
        }
        currentIndex++;
        animate(ul, -currentIndex * lunbotuWidth);
        currentIndexCircle++;
        if (currentIndexCircle == ol.children.length) {
            currentIndexCircle = 0;
        }
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[currentIndexCircle].className = 'current';
    });

    // 左侧
    arrow_l.addEventListener('click', function () {
        if (currentIndex == 0) {
            currentIndex = ul.children.length - 1;
            ul.style.left = -currentIndex * lunbotuWidth;
        }
        currentIndex--;
        animate(ul, -currentIndex * lunbotuWidth);
        currentIndexCircle--;
        if (currentIndexCircle < 0) {
            currentIndexCircle = ol.children.length - 1;
        }
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[currentIndexCircle].className = 'current';
    });



    // 自动播放
    var time = setInterval(function () {
        arrow_r.click();
    }, 2000);


})